import React, {Component} from 'react';
import "./04-组件的样式.css"//导入css模块由webpack的支持
class Style extends Component
{
    render()
    {
        let name="齐天大圣"
        let style={
            background:"red",
            width:"500px",
            height:"200px",
            fontSize:"60px"
        }
        return (
            <div>
                {/*模版语法的规则*/}
                {10+20}--{name}
                {10>20?"false":"true"}
                {/*行内样式的写法*/}
                <div style={style}>{name}</div>
                <div style={{background:"red",
                    width:"500px",
                    height:"200px",}}>{name}</div>
            {/*   行外类的写法 */}
                <div className="active">{name}</div>
                <div id="active">{name}</div>
                <label for="username">用户名：</label>
                <input type={"text"} id="username"/>
            </div>
        );
    }
}

/*
* react导入css样式的原理
* 使用webpack将css文件做成内部样式，并将其插入页面
* */
export default Style;
